<template>
    <van-tabs v-model:active="activeName" color="#FF9133">
        <!-- 看车选车 -->
        <van-tab title="看车选车" name="a">
            <!-- 搜索框 -->
            <van-search v-model="value" show-action placeholder="请输入车辆关键词" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>
            <!-- 筛选 -->
            <van-dropdown-menu active-color="#FF9133">
                <van-dropdown-item v-model="value2" :options="option2" @change="onChange" />
                <van-dropdown-item v-model="value1" :options="option1" />
            </van-dropdown-menu>

            <!-- 车辆消息 -->
            <van-card v-for="item in carlst" :key="item.id" :num="item.num" :price="item.price" :desc="item.desc"
                :title="item.name" :thumb="item.img">
                <template #tags>
                    <!-- <van-tag plain type="primary">标签</van-tag> -->
                    <van-stepper v-model="item.count" input-width="30px" button-size="20px" />
                </template>
                <template #footer>
                    <van-button size="mini">看详情</van-button>
                    <van-button size="mini" @click="oncart(item.id, item.count)">添加购物车</van-button>
                </template>
            </van-card>
        </van-tab>
        <!-- 优惠加油 -->
        <van-tab title="优惠加油" name="b">内容 2</van-tab>
        <!-- 充电站 -->
        <van-tab title="充电站" name="c">内容 3</van-tab>
        <!-- 优惠洗车 -->
        <van-tab title="优惠洗车" name="d">内容 4</van-tab>
    </van-tabs>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import http from '../../http';
const router = useRouter()
const activeName = ref('a');
const value1 = ref(0);
const value2 = ref('a');
const value = ref('');
const min_price = ref('');
const max_price = ref('');
const option1 = [
    { text: '不限类型', value: 0 },
    { text: '新能源优先', value: 1 },
    { text: '燃油车优先', value: 2 },
];
const option2 = [
    { text: '价格不限', value: 'a' },
    { text: '12万以下', value: 'b' },
    { text: '12-18万', value: 'c' },
    { text: '18-25万', value: 'd' },
    { text: '25-35万', value: 'e' },
    { text: '35万以上', value: 'f' },
];
const carlst = ref([])
const onSearch = (val) => showToast(val);
const onClickButton = () => showToast(value.value);
const showToast = (val) => {
    http.get(`car/data/?data=` + val).then(res => {
        const car = res.data.data.hits.hits
        carlst.value = []
        for (let i = 0; i < car.length; i++) {
            console.log(car[i]._source)
            carlst.value.push(car[i]._source)
        }
        console.log(carlst.value)
    })
};
const onChange = () => {
    const price = value2.value
    if (price == 'a') {
        getCarData()
    } else if (price == 'b') {
        min_price.value = 0
        max_price.value = 120000
    } else if (price == 'c') {
        min_price.value = 120000
        max_price.value = 180000
    } else if (price == 'd') {
        min_price.value = 180000
        max_price.value = 250000
    } else if (price == 'e') {
        min_price.value = 250000
        max_price.value = 350000
    } else if (price == 'f') {
        min_price.value = 350000

    }
}
const getCarData = () => {
    http.get("car/car/").then(res => {
        carlst.value = res.data.data
    })
}
const oncart = (id, count) => {
    http.post('shop/cart/', {
        goodid: id,
        count: count,
        userid: localStorage.getItem('userid')
    }).then(res => {
        console.log(res.data)
    })
    // http.post('car/cart/', {
    //     car_id: 1,
    //     count: cartcount.value
    // }).then(res => {
    //     console.log(res.data)
    // })
}
onMounted(() => {
    getCarData()
})
</script>

<style scoped></style>